<template>
  <view class="tarbar-view">
    <view
      class="tarbar-list"
      :style="{
        background: tabBar.backgroundColor,
        color: tabBar.color,
        'border-top':
          tabBar.position == 'bottom' ? '0rpx solid ' + tabBar.borderStyle : 0,
        'border-bottom':
          tabBar.position == 'top' ? '0rpx solid ' + tabBar.borderStyle : 0,
      }"
    >
      <view class="tarbar-list-ul">
        <view
          class="tarbar-list-li"
          v-for="(item, index) in tabBar.list"
          :key="index"
          @click.top="setSelected(item, index)"
          :style="{ 'background-color': selected == index ? '' : '' }"
        >
          <!-- <view class="lineto" v-if="index!==0"></view> -->
          <view class="new-bar-message">
            <view class="tarbar-list-li-icon">
              <image
                :src="
                  selected === index ? item.selectedIconPath : item.iconPath
                "
                mode="heightFix"
              />
            </view>
            <view
              class="tarbar-list-li-name"
              :style="{
                color: selected === index ? tabBar.selectedColor : '#272727',
              }"
            >
              {{ item.text }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-ios-line"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selected: "",
      tabBar: {
        color: "#ffffff",
        selectedColor: "#0480FB",
        borderStyle: "#ccc",
        backgroundColor: "transparent",
        position: "top",
        list: [
          {
            pagePath:
              "/subPage1/socialized-service/farm-service/normalUser/serviceSelect/serviceClassify",
            iconPath:
              "/static/socialized-service/specialist-consultation/bottom-tabar/diagnosis.svg",
            selectedIconPath:
              "/static/socialized-service/specialist-consultation/bottom-tabar/diagnosis-1.svg",
            text: "服务大厅",
          },
          {
            pagePath:
              "/subPage1/socialized-service/farm-service/normalUser/myOrder/myOrder",
            iconPath:
              "/static/socialized-service/specialist-consultation/bottom-tabar/wenzhen.svg",
            selectedIconPath:
              "/static/socialized-service/specialist-consultation/bottom-tabar/wenzhen-1.svg",
            text: "我的订单",
          }
        ],
      },
    };
  },
  // props:{
  // 	selected:{
  // 		type:Number || String,
  // 		default:()=>{
  // 			return ''
  // 		}
  // 	}
  // },
  mounted() {
    this.setselectindex();
  },
  methods: {
    // 获取获取当前处于那个页面，判断index
    setselectindex() {
      let routes = getCurrentPages();
      let curRoute = routes[routes.length - 1].route;
      if (
        curRoute ===
          "subPage1/socialized-service/farm-service/normalUser/serviceSelect/serviceClassify" ||
        curRoute ===
          "subPage1/socialized-service/farm-service/normalUser/serviceSelect/service-organization/service-organization" ||
		curRoute ===
		  "subPage1/socialized-service/farm-service/normalUser/serviceSelect/service-organization/service-order"
      ) {
        this.selected = 0;
      } else if (
        curRoute ===
          "subPage1/socialized-service/farm-service/normalUser/myOrder/myOrder" ||
        curRoute ===
          "subPage1/socialized-service/specialist-consultation/expert-module/my-diagnosis/diagnosis-details/diagnosis-details"
      ) {
        this.selected = 1;
      }
    },
    // 点击底部导航栏触发方法
    setSelected(e, i) {
      if (this.selected !== i) {
        this.$store.commit({
          type: "setTabbarIndex",
          tabindex: i,
        });
        let routes = getCurrentPages();
        uni.redirectTo({ url: e.pagePath });
      }
      // 强制刷新组件状态
      // this.$forceUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
.tarbar-view {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 98;

  // padding-bottom: constant(safe-area-inset-bottom);  /* 兼容 iOS < 11.2 */
  // padding-bottom: env(safe-area-inset-bottom);  /* 兼容 iOS >= 11.2 */
  .tarbar-list {
    width: 100%;
    max-height: 355rpx;
    min-height: 100rpx;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
    color: #4f5153;

    .tarbar-list-ul {
      height: 136rpx;
      box-shadow: 0rpx -2rpx 6rpx 2rpx rgba(1, 32, 45, 0.08);
      width: 100%;
      display: flex;
      align-items: center;
      background-color: #ffffff;
      // padding-bottom: constant(safe-area-inset-bottom);
      // /* 兼容 iOS < 11.2 */
      // padding-bottom: env(safe-area-inset-bottom);
      /* 兼容 iOS >= 11.2 */
      justify-content: space-around;
      // border-top:  1px solid #ebedf0;

      .tarbar-list-li {
        width: 25%;
        height: 136rpx;
        text-align: center;
        display: flex;
        // flex-direction: column;
        // justify-content: center;
        align-items: center;
        justify-content: center;

        // .lineto{
        // 		float: left;
        // 		height: 100rpx;
        // 		width: 3rpx;
        // 		background-image: linear-gradient(to top,#4d586f,#ffffff,#4d586f);
        // 	}
        .new-bar-message {
          width: calc(100% - 2px);
          height: 136rpx;
          // background-color: #4CD964;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .tarbar-list-li-icon {
            width: 50rpx;
            // height: 60rpx;
            margin: 0 0 6rpx;
            // background-color: #00FFEE;
            image {
              height: 50rpx;
            }
          }

          .tarbar-list-li-name {
            // background-color: #00363D;
            width: 180rpx;
            text-align: center;
            line-height: 30rpx;
            font-size: 28rpx;
            font-weight: 500;
            height: 30rpx;
            letter-spacing: 1rpx;
          }
        }
      }
    }
  }
}
</style>

